<!DOCTYPE html>
<html>
    <head>
        <title> 参数管理 </title>
        <meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" href="../../js/lib/layui/css/layui.css">
        <script type="text/javascript" src="../../js/head.js"></script>
        <script>
            // 全屏的高度
            var FULL_SCREEM_HEIGHT = $(window).height();
            // 头 高度
            var HEADER_HEIGHT = 31;
            // 尾 高度
            var FOOTER_HEIGHT = 0;
            /**
             * 调整布局，SVG文件满屏
             */
            var adjustLayout = function() {

                // 调整header和content的高度
                $("#page").css("height", FULL_SCREEM_HEIGHT);
                $("#content").css("height", FULL_SCREEM_HEIGHT - (HEADER_HEIGHT + FOOTER_HEIGHT + 20));
            };

            $(function() {

                // 搜索框样式
                $("#searchparam").parent().css({
                    "margin-left" : "40px",
                    "margin-right" : "40px"
                });

                adjustLayout();

                try {
                    // 查询参数管理的一级节点
                    window.paramsjsi.queryParamParentNodes();
                } catch(e) {
                }
                /**
                 var json = new Array();
                 json.push({
                 "parent_node_name" : "主控参数"
                 });
                 json.push({
                 "parent_node_name" : "线路参数"
                 });
                 queryParamParentNodesCallback(json);
                 **/
            });

            /**
             * 查询参数管理的一级节点的回调函数，更新列表
             */
            function queryParamParentNodesCallback(json) {

                var html = "";
                for (var i = 0; i < json.length; i++) {
                    if (0 == i) {
                        html += '<li class="layui-nav-item layui-selected"><a href="javascript:void(0)" onClick="firstLevelNodeClick(this)" style="color: #009688">' + json[i].parent_node_name + '</a></li>';
                    } else {
                        html += '<li class="layui-nav-item"><a href="javascript:void(0)" onClick="firstLevelNodeClick(this)">' + json[i].parent_node_name + '</a></li>';
                    }
                }

                $("#firstlevel").html(html);

                // 默认选中的第一个节点，触发点击事件
                $(".layui-selected a", $("#firstlevel")).click();
            }

            /**
             *  第一级节点点击事件
             */
            function firstLevelNodeClick(obj) {
                // 切换样式
                $("li", $("#firstlevel")).removeClass("layui-selected");
                $("a", $("#firstlevel")).css({
                    color : '#000000'
                });

                $(obj).css({
                    color : '#009688'
                });
                $(obj).parent().addClass("layui-selected");

                try {
                    // 根据第一级节点名称，加载二级节点
                    var parentNodeName = $(obj).text();
                    window.paramsjsi.queryParamNodes(parentNodeName);
                } catch(e) {
                }
            }

            /*
             * 查询二级节点的回调函数，更新列表（两列）
             */
            function queryParamNodesCallback(json) {

                var html = "";
                for (var i = 0; i < json.length; i += 2) {
                    html += '<div class="layui-row">';
                    html += '<div class="layui-col-xs6" onClick="secondLevelNodeClick(this)"><div class="param-node"><img src="../../image/list.png"/><br/>' + json[i].node_name + '</div></div>';
                    if (i + 1 <= json.length - 1) {
                        html += '<div class="layui-col-xs6" onClick="secondLevelNodeClick(this)"><div class="param-node"><img src="../../image/list.png"/><br/>' + json[i + 1].node_name + '</div></div>';
                    }
                    html += '</div>';
                }

                $("#secondLevel").html(html);
            }

            /**
             * 二级节点点击
             */
            function secondLevelNodeClick(obj) {
                // 切换样式
                $(".param-node", $("#secondLevel")).removeClass("node-selected");
                $("img", $("#secondLevel")).attr("src", "../../image/list.png");

                $(".param-node", $(obj)).addClass("node-selected");
                $("img", $(obj)).attr("src", "../../image/list-selected.png");

                // 跳转到参数配置详细页
                var nodeName = $(obj).text();
                window.location.href = "param-config.html?nodeName=" + nodeName;
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="page" data-dom-cache="true">
            <div data-role="header" id="homeheader" data-theme="f">
                <input type="search" data-mini="true" id="searchparam"/>
                <a href="#" class="ui-btn-left" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-rel="back">&nbsp;</a>
            </div>
            <div data-role="content" id="content" style="padding: 0;">
                <div class="layui-row">
                    <div class="layui-col-xs4">
                        <!--一级节点-->
                        <ul class="layui-nav layui-nav-tree" id="firstlevel"></ul>
                    </div>
                    <!--二级节点-->
                    <div class="layui-col-xs8" id="secondLevel" style="padding: 10px;"></div>
                </div>
            </div>
        </div>
        <!--全局加载layui-->
        <script src="../../js/lib/layui/layui.all.js"></script>
    </body>
</html>